<!-- 添加专家组 -->
<template>
    <div id="app">
        <!-- 基本信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>基本信息</span>
                </div>
            </div>
            <span class="divider" style="margin-bottom: 10px;" />
            <el-form ref="expsForm" :model="exps" :rules="rules" style="margin-left: 10px;">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="专家组名:" prop="groupName">
                            <el-input v-model="exps.groupName" size="small" prefix-icon="el-icon-edit" placeholder="请输入专家组名称" style="width: 160px;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属部门:" prop="hasDept">
                            <el-select v-model="exps.hasDept" size="small" placeholder="请选择" style="display: flex; width: 200px;">
                                <el-option v-for="(item,index) in hasDepts" :key="index" :label="item" :value="item" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="组长名:" prop="groupLeader">
                            <el-input v-model="exps.groupLeader" size="small" prefix-icon="el-icon-edit" placeholder="请输入组长名" style="width: 150px;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="组长电话:" prop="leaderPhone">
                            <el-input v-model="exps.leaderPhone" size="small" prefix-icon="el-icon-edit" placeholder="请输入组长电话" style="width: 160px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="专家组描述:" prop="contents">
                            <span><el-input v-model="exps.contents" style="margin-top: 10px; width: 300px;" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" /></span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 专家组成员信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>专家组成员信息</span>
                </div>
            </div>
            <span class="divider" style="margin-bottom: 10px;" />
            <el-row>
                <el-col :span="24">
                    <el-table border stripe :data="experts_team.data">
                        <el-table-column type="index" />
                        <el-table-column v-for="(v, i) in experts_team.columns" :key="i" align="center" :prop="v.field" :label="v.title" :width="v.width">
                            <template slot-scope="scope">
                                <span v-if="scope.row.isSet">
                                    <el-select v-if="v.field === 'highestEducation'" v-model="experts_team.sel[v.field]" size="small">
                                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                    <el-select v-else-if="v.field === 'profTitle'" v-model="experts_team.sel[v.field]" size="small">
                                        <el-option v-for="item in jobLevel" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                    <el-input v-else v-model="experts_team.sel[v.field]" size="small" />
                                </span>
                                <span v-else>{{ scope.row[v.field] }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="100">
                            <template slot-scope="scope">
                                <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row, scope.$index, true)">
                                    {{ scope.row.isSet? '保存': '修改' }}
                                </span>
                                <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="showDeleteDialog(scope.$index)">
                                    删除
                                </span>
                                <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                                    取消
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="24">
                    <el-button class="el-table-add-row" icon="el-icon-plus" type="primary" @click="addExpertsTeam()">添加</el-button>
                </el-col>
            </el-row>
        </div>
        <div style="text-align: center; margin-top: 100px;">
            <el-button type="warning" @click="submit">保存提交</el-button>
        </div>
    </div>
</template>

<script>
// id生成工具 这个不用看 示例而已 模拟后台返回的id
var generateId = {
    _count: 1,
    get() {
        return ((+new Date()) + '_' + (this._count++))
    }
}
export default {
    data() {
        return {
            exps: {},
            hasDepts: [],
            rules: { // 校验,与prop名对应
                groupName: [
                    {required: true, trigger: 'blur', message: '请输入专家组姓名'}
                ],
                hasDept: [
                    {required: true, trigger: 'change', message: '请选择所属部门'}
                ],
                groupLeader: [
                    {required: true, trigger: 'blur', message: '请输入组长姓名'}
                ],
                leaderPhone: [
                    {required: true, trigger: 'blur', message: '请输入组长电话'},
                    { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, trigger: 'blur', message: '手机号码不正确' }
                ],
                contents: [
                    {required: true, trigger: 'blur', message: '请输入描述内容'}
                ]
            },
            experts_team: {
                sel: null, // 选中行
                columns: [
                    {field: 'profName', title: '姓名', width: 95},
                    {field: 'userSex', title: '性别', width: 70},
                    {field: 'highestEducation', title: '学历', width: 110},
                    {field: 'profTitle', title: '职称', width: 110},
                    {field: 'unitName', title: '工作单位'},
                    {field: 'profPost', title: '职务', width: 120},
                    {field: 'currentMajor', title: '主要从事专业'},
                    {field: 'profPhone', title: '联系电话',  width: 130},
                    {field: 'profRemark', title: '备注', width: 90}
                ],
                data: []
            },
            jobLevel: [],
            options1: [{
                value: '博士',
                label: '博士'
            }, {
                value: '硕士',
                label: '硕士'
            }, {
                value: '本科',
                label: '本科'
            }, {
                value: 'MBA',
                label: 'MBA'
            }, {
                value: '大专',
                label: '大专'
            }, {
                value: '中专',
                label: '中专'
            }, {
                value: '高中',
                label: '高中'
            }, {
                value: '初中',
                label: '初中'
            }, {
                value: '小学',
                label: '小学'
            }, {
                value: '其他',
                label: '其他'
            }]
        }
    },
    created() {
        this.initHasDept()
        this.initJobLevel()
    },
    methods: {
        initJobLevel() { // 获取‘职称’下拉选择信息
            this.getRequest('/system/cfg/joblevel/info').then(resp => {
                if (resp) {
                    resp.data.forEach(item => {
                        this.jobLevel.push({
                            value: item,
                            label: item
                        })
                    })
                }
            })
        },
        initHasDept() { // 获取'部门'下拉框选择信息
            this.getRequest('/system/cfg/dept/getDeptName').then(resp => {
                if (resp) {
                    this.hasDepts = resp.data
                }
            })
        },
        // 读取表格数据
        readExpertsTeam() {
            // 根据实际情况，自己改下啊
            this.experts_team.data.map(i => {
                i.id = generateId.get() // 模拟后台插入成功后有了id
                i.isSet = false // 给后台返回数据添加`isSet`标识
                return i
            })
        },
        addExpertsTeam() { // 添加专家成员
            for (let i of this.experts_team.data) {
                if (i.isSet) return this.$message.warning('请先保存当前编辑项')
            }
            let j = {
                id: 0,
                'profName': '',
                'userSex': '',
                'highestEducation': '',
                'profTitle': '',
                'unitName': '',
                'profPost': '',
                'currentMajor': '',
                'profPhone': '',
                'profRemark': '',
                'isSet': true
            }
            this.experts_team.data.push(j)
            this.experts_team.sel = JSON.parse(JSON.stringify(j))
        },
        pwdChange(row, index, cg) { // 修改
            for (let i of this.experts_team.data) { // 点击修改 判断是否已经保存所有操作
                if (i.isSet && i.id !== row.id) {
                    this.$message.warning('请先保存当前编辑项')
                    return false
                }
            }
            if (!cg) { // 是否是取消操作
                if (!this.experts_team.sel.id) this.experts_team.data.splice(index, 1)
                return row.isSet = !row.isSet
            }
            if (row.isSet) { // 提交数据
                // 项目是模拟请求操作  自己修改下
                let data = JSON.parse(JSON.stringify(this.experts_team.sel))
                for (let k in data)  row[k] = data[k]
                this.$message({
                    type: 'success',
                    message: '保存成功!'
                })
                // 然后这边重新读取表格数据
                this.readExpertsTeam()
                row.isSet = false
            } else {
                this.experts_team.sel = JSON.parse(JSON.stringify(row))
                row.isSet = true
            }
        },
        showDeleteDialog(index) { // 删除一行数据
            this.experts_team.data.splice(index, 1)
            this.$message({
                type: 'success',
                message: '删除成功!'
            })
        },
        submit() { // 保存提交按钮
            this.$refs['expsForm'].validate(valid => {
                if (valid) {
                    var param = {}
                    param = Object.assign(param, this.exps)
                    var list = []
                    list = Object.assign(list, this.experts_team.data)
                    for (let i = 0; i < list.length; i++) {
                        list[i].id = null
                        list[i].isSet = null
                    }
                    setTimeout(() => { // setTimeout()属 window 的方法，用于在指定的毫秒数后调用函数或计算表达式。
                        param.profInfoList = list
                        this.postRequest('/system/group/addGroupAndProfsInfo', param).then(resp => {
                            if (resp) {
                                this.$message({
                                    type: 'success',
                                    message: '提交成功!'
                                })
                                this.$router.push({path: '/expert_team_library/index'})
                            }
                        })
                    }, 200)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.basic {
    margin: 20px;
    background: #fff;
}
.header {
    padding-top: 15px;
    padding-bottom: 5px;
}
.one {
    display: flex !important;
}
.divider {
    display: block;
    border-bottom: solid 1px #f3f3f3;
}
.title {
    margin-left: 15px;
    color: #337ab7;
}
.el-table-add-row {
    margin-top: 10px;
    width: 100%;
    height: 34px;
    border: 1px dashed #409eff;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    display: flex;
}
</style>
